<template>
  <div class="classification">
    <van-nav-bar title="推荐分类" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <div class="con_wrap">
        <ListWrap :list="list" @finish="onFinish" class="lists"></ListWrap>
        <van-button class="btn" color="#6670e4" block @click="submit"
          >确定分类</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Button } from "vant";
import ListWrap from "./com/ListWrap.vue";

export default {
  name: "Classification",
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    ListWrap,
  },
  data() {
    return {
      list: [
        {
          title: "烘焙",
          children: [
            {
              title: "蛋糕",
              children: [
                {
                  title: "纸杯蛋糕",
                },
                {
                  title: "慕斯蛋糕",
                },
                {
                  title: "芝士蛋糕",
                },
                {
                  title: "戚风蛋糕",
                },
                {
                  title: "冰淇淋蛋糕",
                },
                {
                  title: "巴斯克蛋糕",
                },
              ],
            },
            {
              title: "面包",
              children: [
                {
                  title: "全麦面包",
                },
                {
                  title: "法棍",
                },
                {
                  title: "夹心面包",
                },
                {
                  title: "手撕面包",
                },
                {
                  title: "披萨面包",
                },
                {
                  title: "吐司面包",
                },
              ],
            },
            {
              title: "饼",
              children: [
                {
                  title: "曲奇饼",
                },
                {
                  title: "蛋卷",
                },
                {
                  title: "牛奶棒",
                },
                {
                  title: "桃酥",
                },
                {
                  title: "夹心饼干",
                },
                {
                  title: "威化饼",
                },
              ],
            },
          ],
        },
        {
          title: "甜品饮料",
          children: [
            {
              title: "甜品",
              children: [
                {
                  title: "糖水",
                },
                {
                  title: "冰淇淋",
                },
                {
                  title: "泡芙",
                },
                {
                  title: "布丁",
                },
                {
                  title: "提拉米苏",
                },
                {
                  title: "果酱",
                },
              ],
            },
            {
              title: "饮料",
              children: [
                {
                  title: "碳酸饮料",
                },
                {
                  title: "果蔬汁",
                },
                {
                  title: "蛋白饮料",
                },
                {
                  title: "茶饮",
                },
                {
                  title: "咖啡",
                },
                {
                  title: "酒饮",
                },
              ],
            },
          ],
        },
        {
          title: "肉类",
          children: [
            {
              title: "鸡肉",
              children: [
                {
                  title: "鸡肉",
                },
                {
                  title: "鸡胸肉",
                },
                {
                  title: "鸡爪",
                },
                {
                  title: "鸡翅中",
                },
                {
                  title: "鸡翅尖",
                },
                {
                  title: "鸡腿",
                },
              ],
            },
            {
              title: "鱼肉",
              children: [
                {
                  title: "鱼头",
                },
                {
                  title: "鱼肉",
                },
                {
                  title: "鱼尾",
                },
              ],
            },
            {
              title: "牛肉",
              children: [
                {
                  title: "牛头",
                },
                {
                  title: "里脊",
                },
                {
                  title: "牛排",
                },
                {
                  title: "牛舌",
                },
                {
                  title: "排骨",
                },
                {
                  title: "牛杂",
                },
              ],
            },
            {
              title: "羊肉",
              children: [
                {
                  title: "羊蝎子",
                },
                {
                  title: "羊排",
                },
                {
                  title: "羊肉",
                },
              ],
            },
          ],
        },
        {
          title: "蔬菜",
          children: [
            {
              title: "蔬菜",
              children: [
                {
                  title: "西红柿",
                },
                {
                  title: "土豆",
                },
                {
                  title: "茄子",
                },
                {
                  title: "青菜",
                },
                {
                  title: "莲藕",
                },
                {
                  title: "番薯",
                },
                {
                  title: "芋头",
                },
                {
                  title: "菇",
                },
                {
                  title: "豆",
                },
              ],
            },
          ],
        },
        {
          title: "水果",
          children: [
            {
              title: "水果",
              children: [
                {
                  title: "苹果",
                },
                {
                  title: "香蕉",
                },
                {
                  title: "梨子",
                },
                {
                  title: "西瓜",
                },
                {
                  title: "榴莲",
                },
                {
                  title: "葡萄",
                },
                {
                  title: "芒果",
                },
                {
                  title: "柠檬",
                },
                {
                  title: "菠萝",
                },
                {
                  title: "椰子",
                },
                {
                  title: "木瓜",
                },
                {
                  title: "火龙果",
                },
              ],
            },
          ],
        },
        {
          title: "煲汤",
          children: [
            {
              title: "甜汤",
              children: [
                {
                  title: "绿豆沙",
                },
                {
                  title: "红豆沙",
                },
                {
                  title: "芝麻糊",
                },
                {
                  title: "雪梨银耳",
                },
                {
                  title: "木瓜炖牛奶",
                },
                {
                  title: "红枣枸杞银耳羹",
                },
              ],
            },
            {
              title: "咸汤",
              children: [
                {
                  title: "排骨汤",
                  img: "https://img0.baidu.com/it/u=681873784,213150324&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                },
                {
                  title: "莲藕花生猪脚汤",
                  img: "https://img1.baidu.com/it/u=2436980389,1326998591&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                },
                {
                  title: "猪肚汤",
                  img: "https://img0.baidu.com/it/u=1635217141,3984691686&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
                },
                {
                  title: "鱼汤",
                  img: "https://img0.baidu.com/it/u=1688725570,2059311029&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
                },
                {
                  title: "萝卜牛腩汤",
                  img: "https://img2.baidu.com/it/u=3820734936,890405745&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                },
                {
                  title: "紫菜蛋花汤",
                  img: "https://img1.baidu.com/it/u=870257010,3961357196&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
                },
              ],
            },
          ],
        },
        {
          title: "水产",
          children: [
            {
              title: "水产",
              children: [
                {
                  title: "鱼",
                },
                {
                  title: "虾",
                },
                {
                  title: "蟹",
                },
                {
                  title: "贝类",
                },
              ],
            },
          ],
        },
        {
          title: "豆制品",
          children: [
            {
              title: "豆制品",
              children: [
                {
                  title: "纸杯蛋糕",
                },
                {
                  title: "慕斯蛋糕",
                },
                {
                  title: "芝士蛋糕",
                },
                {
                  title: "戚风蛋糕",
                },
                {
                  title: "冰淇淋蛋糕",
                },
                {
                  title: "巴斯克蛋糕",
                },
              ],
            },
            {
              title: "面包",
              children: [
                {
                  title: "全麦面包",
                },
                {
                  title: "法棍",
                },
                {
                  title: "夹心面包",
                },
                {
                  title: "手撕面包",
                },
                {
                  title: "披萨面包",
                },
                {
                  title: "多士面包",
                },
              ],
            },
            {
              title: "饼",
              children: [
                {
                  title: "曲奇饼",
                },
                {
                  title: "蛋卷",
                },
                {
                  title: "牛奶棒",
                },
                {
                  title: "桃酥",
                },
                {
                  title: "夹心饼干",
                },
                {
                  title: "威化饼",
                },
              ],
            },
          ],
        },
        {
          title: "米面",
          children: [
            {
              title: "蛋糕",
              children: [
                {
                  title: "纸杯蛋糕",
                },
                {
                  title: "慕斯蛋糕",
                },
                {
                  title: "芝士蛋糕",
                },
                {
                  title: "戚风蛋糕",
                },
                {
                  title: "冰淇淋蛋糕",
                },
                {
                  title: "巴斯克蛋糕",
                },
              ],
            },
            {
              title: "面包",
              children: [
                {
                  title: "全麦面包",
                },
                {
                  title: "法棍",
                },
                {
                  title: "夹心面包",
                },
                {
                  title: "手撕面包",
                },
                {
                  title: "披萨面包",
                },
                {
                  title: "多士面包",
                },
              ],
            },
            {
              title: "饼",
              children: [
                {
                  title: "曲奇饼",
                },
                {
                  title: "蛋卷",
                },
                {
                  title: "牛奶棒",
                },
                {
                  title: "桃酥",
                },
                {
                  title: "夹心饼干",
                },
                {
                  title: "威化饼",
                },
              ],
            },
          ],
        },
        {
          title: "腌制食品",
          children: [
            {
              title: "蛋糕",
              children: [
                {
                  title: "纸杯蛋糕",
                },
                {
                  title: "慕斯蛋糕",
                },
                {
                  title: "芝士蛋糕",
                },
                {
                  title: "戚风蛋糕",
                },
                {
                  title: "冰淇淋蛋糕",
                },
                {
                  title: "巴斯克蛋糕",
                },
              ],
            },
            {
              title: "面包",
              children: [
                {
                  title: "全麦面包",
                },
                {
                  title: "法棍",
                },
                {
                  title: "夹心面包",
                },
                {
                  title: "手撕面包",
                },
                {
                  title: "披萨面包",
                },
                {
                  title: "多士面包",
                },
              ],
            },
            {
              title: "饼",
              children: [
                {
                  title: "曲奇饼",
                },
                {
                  title: "蛋卷",
                },
                {
                  title: "牛奶棒",
                },
                {
                  title: "桃酥",
                },
                {
                  title: "夹心饼干",
                },
                {
                  title: "威化饼",
                },
              ],
            },
          ],
        },
      ],
      activeNames: ["1"],
      act: "",
    };
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$emit("backs", "");
    },
    submit() {
      if (!!this.act) {
        this.$emit("backs", this.act);
      }
    },
    onFinish(index) {
      this.act = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.classification {
  position: absolute;
  overflow-y: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #fff;
  .con {
    height: calc(100% - 49px);
    overflow: auto;
    .con_wrap {
      padding-bottom: 50px;
      .btn {
        width: 90vw;
        margin: 0 auto;
        margin-top: 5vw;
      }
    }
  }
}
</style>